<template>
    <!--条件筛选-->
    <view class="screen row avarage verCenter">
        <view class="main" :class="number==index?'curr':''" v-for="(item,index) in list" :key="index" @click="select(item,index)">
            <view class="row verCenter" style="position: relative;">
                <view class="text">{{item.name}}</view>
                <text :class="item.ishow ? 'desc':'asc' " v-if="number==index"></text>
                <text class="asc" v-else></text>
            </view>
        </view>
    </view>
</template>

<script>
    /*
	 list     -- 筛选标题的数组
	 num      -- 默认选中第几个
	 @scree-n -- 当前筛选事件
	 ishow    -- false 降序  true 升序 
	 mrimg    -- 默认升降图标
	 simg     -- 升序图标
	 jimg     -- 降序图标
	 -----图片名称勿改 改或统一组件名称
	 
	 注: 筛选当前条件时可根据 id,name, 升降序根据 ishow
	     没有升降则不定义 -- 如:综合
			 根据需求自定义逻辑
	*/
    export default {
        name: 'cx-screen',
        props: {
            list: { //传入的数据
                type: Array
            },
            num: { //默认选择第几个
                type: Number,
                default: -1,
            },
        },
        data() {
            return {
                number: this.num,
            }
        },
        mounted() {

        },
        methods: {
            select(item, i) {
                this.number = i
                this.$emit('screeChange', item, i) //回传给父组件接收-当前
                this.list.forEach((item, index) => {
                    if (i != index && item.ishow) { //如果当前下标不一致且ishow存在 
                        item.ishow = false // - 默认还是未选择状态
                    }
                })
                item.ishow = !item.ishow
            }
        }
    }
</script>

<style lang="scss" scoped>
    .screen {
        height: 80rpx;

        .main {

            image {
                width: 40rpx;
                height: 40rpx;
            }

            .text {
                font-size: 32rpx;
                color: #FFFFFF;
                margin-right: 8rpx;
            }

            .desc {
                width: 0;
                height: 0;
                border-left: 10rpx solid transparent;
                border-right: 10rpx solid transparent;
                border-bottom: 10rpx solid #1397C5;
            }

            .asc {
                width: 0;
                height: 0;
                border-left: 10rpx solid transparent;
                border-right: 10rpx solid transparent;
                border-top: 10rpx solid #1397C5;
            }

            &.curr {}
        }


    }
</style>